<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/socket.io/socket.io.js"></script>
    <!-- jQuery and JavaScript Bundle with Popper --> 
    <!-- CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"  crossorigin="anonymous">
    <style>
        .img-code {
            width: 76px;
            height: 38px;
            margin-left: 20px;
        }
        .img-code img {
            width: 76px;
            height: 38px;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/pages/common/js/md5.js"></script>
</head>
<body>
    <div class="container">
        <div class="py-5 text-center">
          <h2>登录</h2>
          <!-- <p class="lead">xx</p> -->
        </div>
      
        <div class="row justify-content-md-center">
          
          <div class="col-md-8 order-md-1">
            <form class="needs-validation" onsubmit="return false;">
              
              <div class="mb-3">
                <label for="name">昵称</label>
                <div style="display: flex;">
                    <input type="text" class="form-control" id="name" placeholder="请输入昵称" required>
                </div>
                <div class="invalid-feedback">
                    请输入昵称
                </div>
              </div>
      
              <div class="mb-3">
                <label for="email">邮箱</label>
                <input type="email" class="form-control" id="email" placeholder="请输入密码" required>
                <div class="invalid-feedback">
                    请输入密码
                </div>
              </div>
      
              <div class="mb-3">
                <label for="password">密码</label>
                <input type="password" class="form-control" id="password" placeholder="请输入密码" required>
                <div class="invalid-feedback">
                    请输入密码
                </div>
              </div>
      
              <div class="mb-3">
                <label for="code">验证码</label>
                <div style="display: flex;">
                    <input type="text" class="form-control" id="code" placeholder="请输入验证码" required>
                    <div class="img-code"><img src="/api/v1/code.do" alt=""></div>
                </div>
                <div class="invalid-feedback">
                    请输入验证码
                </div>
              </div>
        
 
            
              <hr class="mb-4">
              <button id="login" class="btn btn-primary btn-lg btn-block" >login</button>
              
            </form>
            <button id="get-user-info" class="btn btn-primary btn-lg btn-block" >获取用户信息</button>
            <button id="send-register-email" class="btn btn-primary btn-lg btn-block" >注册</button>
          </div>
        </div>
        <iframe id="iframe" name="tset" style="display: none"></iframe>
        <footer class="my-5 pt-5 text-muted text-center text-small">
          <p class="mb-1">&copy; 2017-2021 Company Name</p>
          <ul class="list-inline">
            <li class="list-inline-item"><a href="#">Privacy</a></li>
            <li class="list-inline-item"><a href="#">Terms</a></li>
            <li class="list-inline-item"><a href="#">Support</a></li>
          </ul>
        </footer>
      </div>
    <script>
      var token = ''
        $('#login').click(async e => {
            let email = $('#email').val()
            let password = $('#password').val()
            let code = $('#code').val()
            const res = await fetch('/api/v1/user/login.do',{
                method: 'post',
                body: JSON.stringify({
                      email,
                      password,
                      code,
                      type: '101'
                    }),
                headers: new Headers({
                  'Content-Type': 'application/json'
                })
            }).then(res => {
              return res.json()
            })
            token = res.result
            localStorage.setItem('token',token)
        })

        $('#get-user-info').click(e => {
          fetch('/api/v1/user/getUserInfo.do',{
              method: 'get',
              
              headers: {
                'Authorization': token || localStorage.getItem('token')
              }
          }).then(res => {
            return res.json()
          })
          
        })

        $('#send-register-email').click(async e => {
          let email = $('#email').val()
          let password = $('#password').val()
          let code = $('#code').val()
          let nickName = $('#name').val()
          await fetch('/api/v1/user/sendRegisterEmail.do',{
              method: 'post',
              body: JSON.stringify({
                email,
                password,
                code,
                nickName
              }),
              headers: new Headers({
                'Content-Type': 'application/json'
              })
          }).then(res => {
            return res.json()
          })
          
        })

        

        $('.img-code img').click(e => {
            $('.img-code img').attr('src',`/api/v1/code.do?abc=${Math.random()}`)
        })

        
        const socket = io('ws://localhost:3001');
        socket.emit('userSay',{data: 'emit'})
        socket.send('sada发顺丰无法为')
        socket.on('serverMessage', data => {
            console.log(data)
        })
    </script>
</body>
</html>